$(function () {
    $("#header").load("./header.html")
    $("#footer").load("./footer.html")

    //轮播图
    var $cloneli = $("#ul li:eq(0)").clone();
    $("#ul").append($cloneli);

    for (var i = 0; i < $("#ul li").length - 1; i++) {
        var $newli = $(`<li></li>`)
        if (i == 0) {
            $newli.addClass("current");
        }
        $("ol").append($newli);
    }

    var imgindex = 0;
    var dianindex = 0;
    function autoPlay() {
        imgindex++;
        if (imgindex == 6) {
            imgindex = 1;
            $(".allMiddle #ul").css("left", 0)
        }

        $(".allMiddle #ul").animate({
            left: imgindex * -1060
        })

        dianindex++;
        if (dianindex == 5) {
            dianindex = 0;
        }
        $("ol li").eq(dianindex).addClass("current").siblings().removeClass("current");
    }

    var timer = setInterval(autoPlay, 2000);
    $("#all").on("mouseenter", function () {
        clearInterval(timer)
    })
    $("#all").on("mouseleave", function () {
        timer = setInterval(autoPlay, 2000);
    })


    // 左右焦点
    $("#left").on("mouseenter", function () {
        $(this).css("opacity", 0.5)
    })
    $("#left").on("mouseleave", function () {
        $(this).css("opacity", 0.1)
    })
    $("#right").on("mouseenter", function () {
        $(this).css("opacity", 0.5)
    })
    $("#right").on("mouseleave", function () {
        $(this).css("opacity", 0.1)
    })

    $("#left").on("click", function () {
        imgindex--;
        dianindex--;
        if (imgindex == -1) {
            imgindex = 4;
        }
        if (dianindex == -1) {
            dianindex = 4;
        }
        $("ol li").eq(dianindex).addClass("current").siblings().removeClass("current");
        $(".allMiddle #ul").stop().animate({
            left: imgindex * -1060
        })
    })

    $("#right").on("click", function () {
       autoPlay();
    })

    $("#all ol").on("click", "li", (evt) => {
        var $index = $(evt.currentTarget).index();
        dianindex = imgindex = $index - 1;
        autoPlay();
    })



    //返回头部
    $(document).scroll(function () {
        if ($(document).scrollTop() > 500) {
            $(".backTop").show();
        } else {
            $(".backTop").hide();
        }
    })


    $(".backTop").on("mouseenter", function () {
        $(this).css({
            "width":"110px",
            "opacity":"1"
        })
        $(".textTop").show().html("返回头部")
    })
    $(".backTop").on("mouseleave", function () {
        $(this).css({
            "width":"41px",
            "opacity":0.5
        })
        $(".textTop").hide();
       
    })

    $(".backTop").on("click", function () {
        $("html").animate({ scrollTop: 0 }, 100, function () { })
    })




    //动态加载商品 3个中部衣柜
    $.ajax({
        url:"./api/goods",
        type:"get",
        dataType:"json"
    }).done((res)=>{
        // console.log(res)
        var strHtml ="";
        res.forEach(el => {
            strHtml+=`<div class="yiguiList">
            <img src="${el.p_img_index}">
            <p class="yiguiPAX" style="width: 85px">${el.p_name}</p>
            <p>${el.p_rule}</p>
            <h3>￥3,740.00</h3><span class="textLine"></span>
            <h2>￥${el.p_price}</h2>
            <a href="./goods.html?id=${el.p_id}" class="button">立即购买 ></a>
        </div>`
        });

        $(".yigui").html(strHtml);
    })

})